<template>
  <div ref="homeDiv" v-bind:style="appDivStyle">

    <h1>{{ msg }}</h1>
    <h1>{{ msg }}</h1>
    <h1>{{ msg }}</h1>
    <el-button @click="show = !show" :loading="loading">{{ Test }}</el-button>

    <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
      <p v-if="show">hello</p>
    </transition>

  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      Test: '动画测试',
      show: true,
      // v-bind:style="appDivStyle"
      msg: 'Welcome to Your 主页1',
      appDivStyle: {
        // height:this.$store.getters.appHeight,
        height: this.$store.getters.appHeight,
        background: '-webkit-linear-gradient(45deg,#6a7ec1,#2d5f8b)'
      }
    }
  },
  mounted: function mounted() {
    // this.appDivStyle.height = this.$store.getters.appHeight;
    // alert(this.$store.getters.appHeight);
    // this.appDivStyle.height = (this.$store.state.tabHeight - 44) + "px";
    // this.appDivStyle.height = "600px";
    // console.log('主页1,mounted');
    // alert(this.$ref.homeDiv.offsetHeight);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#homeDiv {
  width: 100%;

  background: -webkit-linear-gradient(45deg, #6a7ec1, #2d5f8b); /* Safari 5.1 to 6.0 */
  border: solid 0px red;
  overflow: auto;
}
</style>
